<template>
  <view class="main">
    <u-icon
      class="arrow_left"
      name="arrow-left"
      size="24"
      color="#fff"
      @click="goBack()"
    ></u-icon>
    <u--image
      :showLoading="true"
      src="/static/img/my/homeCenter/myHome_bj.png"
      width="100vw"
      height="325rpx"
    ></u--image>
    <view class="userInfo">
      <view class="info_top">
        <view class="info_avatar">
          <u--image
            :showLoading="true"
            :src="userInfo.avatar"
            shape="circle"
            width="180rpx"
            height="180rpx"
            @click="edit"
          ></u--image>
        </view>
        <view class="edit" @click="edit">编辑</view>
      </view>
      <view class="userName">{{ userInfo.nickname }}</view>
      <view class="introduce">{{ userInfo.interest }}</view>
      <view class="interest">
        <view class="praise"
          ><text class="num">{{ userInfo.likes }}</text
          >赞</view
        >
        <view class="follow"
          ><text class="num" @click="goFollow">{{ userInfo.focus }}</text
          >关注</view
        >
      </view>
    </view>

    <view class="quiz" id="quiz">
      <view class="quiz_title">我的提问</view>
      <scroll-view
        v-if="askList.length > 0"
        :style="{ height: `calc(100vh - 770rpx` }"
        class="quiz_scroll"
        scroll-y="true"
        refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        refresher-background="#F6F7FB"
        @refresherrefresh="reload"
        @scrolltolower="loadMore"
      >
        <view class="quiz_list">
          <view
            class="quiz_item"
            v-for="(item, index) in askList"
            :key="index"
            @click="goInfo(item)"
          >
            <view class="flex">
              <image
                class="quiz_avatar"
                :src="item.quiz_avatar"
                mode="scaleToFill"
              ></image>
              <view class="quiz_name">
                <view class="item_name">{{ item.quiz_nickname }}</view>
                <view class="item_time">{{ item.add_time_text }}</view>
              </view>
            </view>
            <view class="quiz_content">
              {{ item.title }}
            </view>
          </view>
        </view>
        <uni-load-more :status="listStatus"></uni-load-more>
      </scroll-view>
      <uni-load-more v-else :status="listStatus"></uni-load-more>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homeCenter/home"
></script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6 !important;
}

.main {
  .topTitle {
    position: absolute;
    top: 0;
    left: 0;
  }

  .userInfo {
    position: relative;
    z-index: 999;
    width: 100%;
    border-radius: 25rpx 25rpx 0 0;
    padding: 30rpx 40rpx;
    background-color: #fff;
    margin-top: -25rpx;

    .info_top {
      display: flex;
      justify-content: space-between;
    }

    .info_avatar {
      margin-top: -135rpx;
      border: 10rpx solid #fff;
      border-radius: 50%;
      z-index: 9999;
    }

    .edit {
      width: 148rpx;
      height: 62rpx;
      line-height: 62rpx;
      background: #fb840e;
      border-radius: 82rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
    }

    .userName {
      margin-top: 20rpx;
      font-weight: 700;
      font-size: 50rpx;
      color: #333333;
    }

    .introduce {
      width: 100%;
      padding: 40rpx 0;
      height: auto;
      font-size: 25rpx;
      line-height: 32rpx;
      color: #999999;
      background-color: #fff;
    }

    .interest {
      display: flex;
      margin-top: 20rpx;

      .praise,
      .follow {
        font-size: 26rpx;
        color: #999;

        .num {
          color: #6d91ff;
          margin-right: 10rpx;
          font-size: 40rpx;
        }
      }

      .praise {
        margin-right: 100rpx;
      }
    }
  }

  .quiz {
    background: #fff;
    margin-top: 20rpx;
    padding: 0 40rpx;

    .quiz_title {
      font-size: 36rpx;
      padding: 30rpx 0;
      color: #333333;
      border-bottom: 2rpx solid #eaeaea;
    }

    .quiz_scroll {
      height: auto;
      padding: 30rpx 0;
      background-color: #fff;

      .quiz_list {
        .quiz_item {
          margin-top: 60rpx;
          &:first-child {
            margin-top: 0 !important;
          }

          .quiz_avatar {
            margin-right: 10rpx;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }

          .quiz_name {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item_name {
              font-size: 28rpx;
            }
            .item_time {
              font-size: 24rpx;
              color: #999;
              margin-top: 10rpx;
            }
          }

          .quiz_content{
            font-size: 30rpx;
            font-weight: bold;
            margin-top: 30rpx;
          }
        }
      }
    }
  }
}

.arrow_left {
  position: absolute;
  top: var(--status-bar-height);
  left: 32rpx;
  z-index: 999999;
}
</style>
